<template>
  <div class="table-box">
    <pro-table ref="proTableRef" row-key="id" :columns="columns" :init-param="initParam" :request-api="getLogByAuthPageApi">
      <template #success="{ row }">
        <el-tag :type="row.success ? 'success' : 'danger'" effect="plain">
          {{ row.success ? "成功" : "失败" }}
        </el-tag>
      </template>
    </pro-table>
  </div>
</template>

<script setup lang="ts">
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getLogByAuthPageApi } from "@/api/modules/system/logByAuth";

defineOptions({
  name: "SystemUserLog"
});

/** 表格实例 */
const proTableRef = ref<ProTableInstance>();

/** 表单初始化参数 */
const initParam = reactive({ orderField: "createTime", isAscending: false });
/** 表格配置项 */
const columns: ColumnProps[] = [
  { prop: "account", label: "登录用户", minWidth: 120, search: { el: "input" } },
  { prop: "userName", label: "用户姓名", minWidth: 160 },
  { prop: "ip", label: "登录IP", minWidth: 120, tag: true, search: { el: "input" } },
  { prop: "address", label: "登录地址", minWidth: 150 },
  { prop: "browser", label: "浏览器", minWidth: 180, search: { el: "input" } },
  { prop: "osInfo", label: "系统信息", minWidth: 200, search: { el: "input" } },
  { prop: "success", label: "状态", width: 90 },
  {
    prop: "createTime",
    label: "操作时间",
    width: 180,
    search: {
      el: "date-picker",
      key: "date",
      props: {
        type: "daterange",
        valueFormat: "YYYY-MM-DD"
      }
    }
  }
];
</script>
